<template>
  <div class="my-special-effects3">
    <div class="gb-scene">
      <div class="gb-cube">
        <div class="gb-cube-item"></div>
        <div class="gb-cube-item"></div>
        <div class="gb-cube-item"></div>
        <div class="gb-cube-item"></div>
        <div class="gb-cube-item"></div>
        <div class="gb-cube-item"></div>
        <div class="gb-pyramid">
          <div class="gb-pyramid-item top"></div>
          <div class="gb-pyramid-item triangle"></div>
          <div class="gb-pyramid-item triangle"></div>
          <div class="gb-pyramid-item triangle"></div>
          <div class="gb-pyramid-item triangle"></div>
        </div>
      </div>
      <div class="gb-base">
        <div class="gb-base-item"></div>
        <div class="gb-base-item"></div>
        <div class="gb-base-item triangle"></div>
        <div class="gb-base-item triangle"></div>
        <div class="gb-base-item triangle"></div>
        <div class="gb-base-item triangle"></div>
        <div class="gb-base-item"></div>
      </div>
      <div class="gb-light">
        <div v-for="i in 7" :key="i" class="gb-light-item" :style="getStyle(i)"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    getStyle(i) {
      let left = parseInt(Math.random() * 70) + i * 70 - 300;
      return {
        height: `${Math.random() * 80 + 100}px`,
        left: left + 'px',
        bottom: `${Math.abs(i - 3) * 30 - 10}px`,
        animation: `my-special-effects-gb-light ${Math.random() * 4 + 6}s ${Math.random() * 6}s ease infinite`
      }
    }
  }
}
</script>

<style lang="scss">
.my-special-effects3{
  $gb-theme-bg: #222;
  $gb-theme-bg-core: #153974;
  $gb-theme-bg-title: #0E55CD;
  $gb-theme-text: #fff;
  $gb-theme-text-1: #f7cb75;
  $gb-theme-text-2: #ff3838;
  $gb-theme-text-3: #ff8500;
  $gb-theme-text-4: #00ff40;
  $gb-theme-text-5: #00c2ff;

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 150px;
  background-color: #03081E;
  .gb-scene{
    width: 440px;
    height: 440px;
    position: relative;
    perspective-origin: center;
    transform-origin: center;
    transform-style: preserve-3d;
    perspective: 100000px;
    z-index: 10000;
    box-sizing: border-box;
    * {
      box-sizing: border-box;
    }
    &:hover{
      .gb-base-item:nth-child(7){
        transform: rotateX(-90deg) translateZ(50px);
      }
    }
  }
  .gb-cube{
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 170px;
    left: 50%;
    margin-left: -50px;
    perspective-origin: center;
    transform-origin: center;
    transform-style: preserve-3d;
    animation: my-special-effects-gb-3d-rotate1 8s ease infinite;
    &-item{
      width: 100px;
      height: 100px;
      border: 1px solid rgba($gb-theme-text-5, 0.7);
      position: absolute;
      backface-visibility: visible;
      transform-origin: center center;
      // 上
      &:nth-child(1){
        background-color: $gb-theme-bg-core;
        box-shadow: 0 0 60px rgba($gb-theme-text-5, .7) inset;
        transform: rotateX(90deg) translateZ(50px);
        opacity: .9;
      }
      // 下
      &:nth-child(2){
        background-color: $gb-theme-bg-core;
        box-shadow: 0 0 60px rgba($gb-theme-text-5, .7) inset;
        transform: rotateX(-90deg) translateZ(50px);
      }
      // 前
      &:nth-child(3){
        background-image: linear-gradient(to bottom, transparent 30%, rgba($gb-theme-text-5, 0.4));
        transform: translateZ(50px);
      }
      // 后
      &:nth-child(4){
        background-color: $gb-theme-bg-core;
        transform: rotateY(180deg) translateZ(50px);
      }
      // 左
      &:nth-child(5){
        background-image: linear-gradient(to bottom, transparent 30%, rgba($gb-theme-text-5, 0.4));
        transform: rotateY(-90deg) translateZ(50px);
      }
      // 右
      &:nth-child(6){
        background-color: $gb-theme-bg-core;
        transform: rotateY(90deg) translateZ(50px);
      }
    }
  }
  .gb-pyramid{
    width: 40px;
    height: 80px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -20px;
    perspective-origin: center;
    transform-origin: center;
    transform-style: preserve-3d;
    animation: my-special-effects-gb-3d-rotate2 4s linear infinite;
    &-item{
      position: absolute;
      backface-visibility: visible;
      transform-origin: center center;
      // 上
      &:nth-child(1){
        background-color: rgba($gb-theme-text-5, 0.8);
        transform: rotateX(90deg) translateZ(16px);
      }
      // 前
      &:nth-child(2){
        transform: rotateX(-16deg) translateZ(10px);
      }
      // 后
      &:nth-child(3){
        transform: rotateX(16deg) rotateY(180deg) translateZ(10px);
      }
      // 左
      &:nth-child(4){
        transform: rotateZ(-16deg) rotateY(-90deg) translateZ(10px);
      }
      // 右
      &:nth-child(5){
        transform: rotateZ(16deg) rotateY(90deg) translateZ(10px)
      }
    }
    .top{
      width: 40px;
      height: 40px;
      border: 1px solid rgba($gb-theme-text-5, 0.5);
    }
    .triangle{
      width: 40px;
      height: 74px;
      border-top: 1px solid rgba($gb-theme-text-5, 0.5);
      overflow: hidden;
      &:before{
        content: "";
        width: 46px;
        height: 64px;
        border: 1px solid rgba($gb-theme-text-5, 0.5);
        background-image: linear-gradient(135deg, rgba($gb-theme-text-5, 0.1) 60%, rgba($gb-theme-text-5, 0.8));
        position: absolute;
        top: -52px;
        left: 1px;
        transform-origin: center;
        transform: scaleX(.65) scaleY(2.4) rotateZ(45deg);
      }
    }
  }
  .gb-base{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 300px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -150px;
    perspective-origin: center;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: translateY(-10px) rotateX(-17deg) rotateY(45deg);
    &:before,
    &:after {
      content: "";
      width: 300px;
      height: 500px;
      position: absolute;
      bottom: 120px;
      left: 0;
      opacity: 0.7;
      mask: linear-gradient(to top, #000 10%, transparent);;
    }
    &:before{
      width: 300px;
      background-image: linear-gradient(-135deg, transparent , rgba($gb-theme-text-5, .7));
      transform: translateZ(150px);
    }
    &:after{
      width: 299px;
      background-image: linear-gradient(-135deg, transparent , rgba($gb-theme-text-5, .7));
      transform: rotateY(90deg) translateZ(-150px);
      left: 1px;
    }
    &-item{
      border: 1px solid rgba($gb-theme-text-5, 0.5);
      position: absolute;
      backface-visibility: visible;
      transform-origin: center center;
      // 上
      &:nth-child(1){
        width: 200px;
        height: 200px;
        border: 2px solid rgba($gb-theme-text-5, 0.7);
        background-color: $gb-theme-bg-core;
        transform: rotateX(-90deg) translateZ(-8px);
      }
      // 下
      &:nth-child(2){
        width: 300px;
        height: 300px;
        border: 0;
        box-shadow: 0 0 10px rgba($gb-theme-text-5, .7) inset;
        background-image: radial-gradient(transparent 30%, rgba($gb-theme-text-5, 0.4));
        transform: rotateX(90deg) translateZ(-30px);
        border-radius: 6px;
      }
      // 前
      &:nth-child(3){
        transform: translateZ(50px) translateZ(50px) translateY(8px);
      }
      // 后
      &:nth-child(4){
        transform: rotateY(180deg) translateZ(100px) translateY(8px);
      }
      // 左
      &:nth-child(5){
        transform: rotateY(-90deg) translateZ(100px) translateY(8px);
      }
      // 右
      &:nth-child(6){
        transform: rotateY(90deg) translateZ(100px) translateY(8px);
      }
      // 下
      &:nth-child(7){
        width: 200px;
        height: 200px;
        border: none;
        box-shadow: 0 0 70px rgba($gb-theme-text-5, .2) inset;
        transform: rotateX(-90deg) translateZ(70px);
        border-radius: 10px;
        transition: all 300ms ease-in-out;
      }
    }
    .triangle{
      width: 200px;
      height: 30px;
      border-top: 0;
      background-image: linear-gradient(to left, $gb-theme-bg 25%, $gb-theme-text-5 75%);
      background-size: 8px 40px;
      background-position: 0 0;
      mask: linear-gradient(to bottom, #000 , rgba(#000, .5));
      animation: my-special-effects-gb-base 60s linear infinite;
    }
  }
  .gb-light{
    width: 0;
    position: absolute;
    bottom: -20px;
    left: 50%;
    &-item{
      height: 120px;
      border-left: 3px dotted scale-color($gb-theme-text-5, $lightness: 40%);
      position: absolute;
      left: 0;
      bottom: 0;
      opacity: 0;
      mask: linear-gradient(to bottom, transparent, #000 50%, transparent);
      animation: my-special-effects-gb-light 8s ease-in-out infinite;
    }
  }
}
@keyframes my-special-effects-gb-base {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}
@keyframes my-special-effects-gb-light{
  0%{
    transform: translateY(0);
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  30%{
    opacity: 1;
  }
  40%{
    transform: translateY(-200px);
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}
@keyframes my-special-effects-gb-3d-rotate1 {
  0% {
    transform: translateY(-7px) rotateX(-17deg) rotateY(45deg);
  }
  50% {
    transform: translateY(3px) rotateX(-17deg) rotateY(45deg);
  }
  100% {
    transform: translateY(-7px) rotateX(-17deg) rotateY(45deg);
  }
}

@keyframes my-special-effects-gb-3d-rotate2 {
  0% {
    transform: rotateY(-360deg) translateY(2px);
  }
  50% {
    transform: rotateY(-180deg) translateY(2px);
  }
  100% {
    transform: rotateY(0) translateY(2px);
  }
}
</style>